<template>
  <a-table :pagination="pagination" :columns="columns" :dataSource="SjDataSource">

    <!--搜索部分-->
    <div
      slot="filterDropdown"
      slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
      style="padding: 8px"
    >
      <a-input
        v-ant-ref="c => searchInput = c"
        :placeholder="`Search ${column.dataIndex}`"
        :value="selectedKeys[0]"
        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
        @pressEnter="() => handleSearch(selectedKeys, confirm)"
        style="width: 188px; margin-bottom: 8px; display: block;"
      />
      <a-button
        type="primary"
        @click="() => handleSearch(selectedKeys, confirm)"
        icon="search"
        size="small"
        style="width: 90px; margin-right: 8px"
      >Search
      </a-button
      >
      <a-button
        @click="() => handleReset(clearFilters)"
        size="small"
        style="width: 90px"
      >Reset
      </a-button
      >
    </div>
    <a-icon
      slot="filterIcon"
      slot-scope="filtered"
      type="search"
      :style="{ color: filtered ? '#108ee9' : undefined }"
    />
    <template slot="customRender" slot-scope="text">
      <span v-if="searchText">
        <template
          v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
          <mark
            v-if="fragment.toLowerCase() === searchText.toLowerCase()"
            :key="i"
            class="highlight">{{ fragment }}</mark>
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
      <template v-else>{{ text }}</template>
    </template>


    <!--里面放该帖子的内容展示，不展示评论，操作放在下面的div的右下角-->
    <div slot="expandedRowRender" slot-scope="record">
      <div style="display: flex;margin-bottom: 10px;">
        <div style="margin: 5px;font-weight: 600">司机基本数据：</div>
        <div style="background-color: #ff3535;padding: 5px 8px;border-radius: 5px;color: #ffffff;border:1px solid #8b8b8b">
          司机差评数：{{ record.sjCpNum }}
        </div>
        <div style="margin-left: 10px;background-color: green;padding: 5px 8px;border-radius: 5px;color: #ffffff;border:1px solid #8b8b8b">
          司机好评数：{{ record.sjHpNum }}
        </div>
        <div style="margin-left: 10px;background-color: yellow;padding: 5px 8px;border-radius: 5px;border:1px solid #8b8b8b">
          司机接单数：{{ record.sjJdNum }}
        </div>
      </div>
      <div style="display: flex;margin-bottom: 10px;">
        <div style="margin: 5px;font-weight: 600">司机认证情况：</div>
        <div
          v-if="record.sjUser.userSmrz===1"
          style="background-color: green;padding: 5px 8px;border-radius: 5px;color: #ffffff;border:1px solid #8b8b8b">
          已完成实名认证
        </div>
        <div
          v-if="record.sjUser.userSmrz===0"
          style="background-color: #ff3535;padding: 5px 8px;border-radius: 5px;color: #ffffff;border:1px solid #8b8b8b">
          未完成实名认证
        </div>
        <div
          v-if="record.sjUser.userClrz===1"
          style="background-color: green;padding: 5px 8px;border-radius: 5px;color: #ffffff;border:1px solid #8b8b8b;margin-left: 10px;">
          已完成车辆认证
        </div>
        <div
          v-if="record.sjUser.userClrz===0"
          style="background-color: #ff3535;padding: 5px 8px;border-radius: 5px;color: #ffffff;border:1px solid #8b8b8b;margin-left: 10px;">
          未完成车辆认证
        </div>
      </div>
      <div style="position: relative;right: 0">
        <a-button type="primary" @click="toSeeThisSj(record.sjUser.userId)">查看用户&nbsp; {{ record.sjUser.userNc }}
          &nbsp;全部信息
        </a-button>
      </div>
    </div>

    <!--状态的选择部分-->
    <a-dropdown slot="score" slot-scope="text,score">
      <a class="ant-dropdown-link" v-if="score.sjUser.userZt===0">正常
        <a-icon type="down"/>
      </a>
      <a class="ant-dropdown-link" v-if="score.sjUser.userZt===1">删除
        <a-icon type="down"/>
      </a>
      <a class="ant-dropdown-link" v-if="score.sjUser.userZt===2">禁用
        <a-icon type="down"/>
      </a>
      <a-menu slot="overlay">
        <a-menu-item>
          <a href="javascript:" @click="toUpdateZt('zc',score.key)">正常</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:" @click="toUpdateZt('sc',score.key)">删除</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:" @click="toUpdateZt('jy',score.key)">禁用</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </a-table>
</template>

<script>
    import {putAction} from '@/api/manage'

    export default {
        name: 'SjTable',
        components: {},
        props: ["SjDataSource"],
        mixins: [],
        data() {
            return {
                searchText: '',
                searchInput: null,
                columns: [
                    {
                        title: '序号', dataIndex: 'key', width: 100,
                    },
                    {
                        title: '司机昵称', dataIndex: 'sjUser.userNc', key: 'sjUser.userNc', width: 100,
                        //查找
                        scopedSlots: {
                            filterDropdown: 'filterDropdown',
                            filterIcon: 'filterIcon',
                            customRender: 'customRender'
                        },
                        onFilter: (value, record) => record.sjUser.userNc.toString().toLowerCase().includes(value.toLowerCase()),
                        onFilterDropdownVisibleChange: visible => {
                            if (visible) {
                                setTimeout(() => {
                                    this.searchInput.focus()
                                }, 0)
                            }
                        }
                    },
                    {
                        title: '司机真名', dataIndex: 'sjUser.userXm', key: 'sjUser.userXm', width: 300,
                        //查找
                        scopedSlots: {
                            filterDropdown: 'filterDropdown',
                            filterIcon: 'filterIcon',
                            customRender: 'customRender'
                        },
                        onFilter: (value, record) => record.sjUser.userXm.toString().toLowerCase().includes(value.toLowerCase()),
                        onFilterDropdownVisibleChange: visible => {
                            if (visible) {
                                setTimeout(() => {
                                    this.searchInput.focus()
                                })
                            }
                        }
                    },
                    {
                        title: '注册日期',
                        dataIndex: 'sjUser.userZcrqsj',
                        key: 'sjUser.userZcrqsj',
                        width: 120,
                        //排序
                        sorter: (a, b) => a.sjUser.userZcrqsj - b.sjUser.userZcrqsj
                    },
                    {
                        title: '状态',
                        key: 'score',
                        width: 80,
                        scopedSlots: {customRender: 'score'}
                    }
                ],
                pagination: {
                    showQuickJumper: true,
                    defaultPageSize: 10,
                    showSizeChanger: true,
                    // pageSizeOptions: [10, 15, 30, 50, 80, 100, 150, 200],
                    style: {
                        marginRight: '15px'
                    }
                },
                url: {
                    putOneUserZt: "/my/sjInfo/putOneUserZt"
                }
            }
        },
        created() {
        },
        methods: {
            //表格的查找方法
            handleSearch(selectedKeys, confirm) {
                confirm();
                this.searchText = selectedKeys[0]
            },
            handleReset(clearFilters) {
                clearFilters();
                this.searchText = ''
            },
            onChange(pageNumber) {
                console.log('Page: ', pageNumber)
            },
            //修改状态
            toUpdateZt(ztXx, key) {
                var zt = 0;
                var userId = this.SjDataSource[key - 1].sjUser.userId;
                switch (ztXx) {
                    case "zc":
                        zt = 0;
                        break;
                    case "sc":
                        zt = 1;
                        break;
                    case "jy":
                        zt = 2;
                        break;
                    default:
                }
                var info = {userId: userId, zt: zt};
                putAction(this.url.putOneUserZt, info).then((res) => {
                    if (res.success) {
                        this.$message.success('用户状态修改成功！', 3);
                        this.SjDataSource[key - 1].sjUser.userZt = zt;
                    }
                })
            },
            //当触发一个情况时，thisIndex+12，然后再触发loadTentyTwoData
            //跳转到当前这个司机的页面
            toSeeThisSj(thisUserId) {//点击跳转函数
                console.log(thisUserId);
                this.$router.push({
                    path: "/single/SjShow",//跳转路由
                    query: {
                        thisUserId: thisUserId
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>